<!DOCTYPE html>
<html>
<head>
	<title>jQM Autocomplete</title>
	<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
	<meta name="viewport" content="width=device-width" />
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<link rel="stylesheet" href="styles.css" />

	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<script src="jqm.autoComplete-1.5.2-min.js"></script>
	<script src="code.js"></script>
</head>

<body>

	<div data-role="page" id="mainPage">

		<div data-role="header">
			<h1>jQM Autocomplete</h1>
			<div>
				<select id="examples" data-mini="true" data-native-menu="false">
					<option value="index.html">Remote Array</option>
					<option value="complex.html" selected="true">Remote Object</option>
					<option value="array.html">Local Array</option>
					<option value="local_complex.html">Local Object</option>
					<option value="callback.html">Callback</option>
					<option value="callback-plus.html">Callback Plus</option>
					<option value="search.html">Using Search Input</option>
				</select>
			</div>
		</div>

		<div data-role="content">

			<h3>Remote Complex Data</h3>

			<p>
				In this example autoComplete returns an array of objects from a remote url, each with a label and a value key.
			</p>

			<pre>
[
    {
        value: "22",
        label: "Maine"
    },
    {
        value: "23",
        label: "Maryland"
    }
]
			</pre>

			<p>
				<input type="text" id="searchField" placeholder="US States">
				<ul id="suggestions" data-role="listview" data-inset="true"></ul>
			</p>

			<p>
				<a href="https://github.com/commadelimited/autoComplete.js" data-role="button">Download the code</a>
			</p>

		</div>

	</div>

	<script>
		$("#mainPage").on("pageshow", function(e) {

			$("#searchField").autocomplete({
				target: $('#suggestions'),
				source: 'data.cfc?method=search&returnformat=json&data=complex',
				link: 'target.html?term=',
				minLength: 1
			});
		});
	</script>

</body>
</html>

